<!-- 从业者-我的-我的订单 -->
<template>
	<view class="recruitment-container">
		<!-- 顶部标签栏 -->
<!-- 		<u-tabs :list="tabs" :current="currentTab" @change="tabChange" active-color="#2979ff" inactive-color="#666"
			bar-width="120" :bold="true" :font-size="32"></u-tabs> -->
		
		<!-- 切换菜单 -->
		<view class="course-tabs">
			<u-tabs :list="tabs" :current="currentTab" @change="tabChange" activeColor="#03B8CD" inactiveColor="#606266"
				barWidth="80" item-width="50%" bg-color="#ffffff"></u-tabs>
		</view>	

		<!-- 内容区域 -->
		<view class="content">
			<!-- 订单列表 -->
			<view v-if="orderList.length > 0">
				<view v-for="(order, index) in filteredJobs" :key="order.bpto_code" class="job-card" @click="recordDetails(order.bpto_code)">					
					<view class="job-header">
						<text class="job-title">{{ chanageDataTime(order.create_time) }}</text>
						<!-- <text class="job-salary">{{ order.bpto_desc }}</text> -->
					</view>
					
					<view class="card-top">
						<!--左边证书图片 -->
						<view class="card-left">							
							<view class="job-image">
								<u-image width="60px" height="80px" :src="image"></u-image>
							</view>						
						</view>
						<!-- 右边文字 -->
						<view class="card-right">							
							<view class="job-info">
								<text class="job-item">{{ order.biz_name }}</text>
							</view>							
							<view class="job-info">
								<text class="info-item">{{ order.bpto_desc }}</text>
								<!-- <text class="info-item">人</text> -->
							</view>							
							<view class="job-meta">
								<text>订单金额：{{ order.bpto_price }}</text>
							</view>
						</view>			
					</view>		
					<!-- 课程订单按钮 -->
					<view class="job-actions" v-if="currentTab === 0">
						<template v-if="order.orderinfo.result === '' ">
							<u-button type="primary" size="medium" shape="circle"  plain  @click="orderpay(order.bpto_code)" :custom-style="customStyleObject">
								支付
							</u-button>
							<u-button type="primary" size="medium" shape="circle" plain  @click="courseDelete(order.bpto_code)" :custom-style="customStyleObject">
								取消订单
							</u-button>
						</template>
						<template v-else-if="order.orderinfo.result == 'SUCCESS'">
							<u-button type="error" size="medium" shape="circle" plain @click="deleteJob(order.bpto_code)" :custom-style="customStyleObject">
								退款
							</u-button>
<!-- 							<u-button type="primary" size="medium" shape="circle" plain  @click="publishJob(job.id)" :custom-style="customStyleObject">
								取消报名
							</u-button> -->
							<u-button type="primary" size="medium" shape="circle"  plain @click="recordDetails(order.bpto_code)">
								详情
							</u-button>
						</template>
<!-- 						<template v-else>
							<u-button type="primary" size="medium" shape="circle" plain  @click="recordDetails(job.id)">
								详情
							</u-button>
						</template> -->
					</view>
					
					<!-- 考证订单按钮 -->
					<view class="job-actions" v-if="currentTab === 1">
						<template v-if="order.orderinfo.result === '' ">
							<u-button type="primary" size="medium" shape="circle"  plain  @click="orderpay(order.bpto_code)" :custom-style="customStyleObject">
								支付
							</u-button>
							<u-button type="primary" size="medium" shape="circle" plain  @click="kzDelete(order.bpto_code)" :custom-style="customStyleObject">
								取消订单
							</u-button>
						</template>
						<template v-else-if="order.orderinfo.result == 'SUCCESS'">
							<u-button type="error" size="medium" shape="circle" plain @click="deleteJob(order.bpto_code)" :custom-style="customStyleObject">
								退款
							</u-button>
<!-- 							<u-button type="primary" size="medium" shape="circle" plain  @click="publishJob(job.id)" :custom-style="customStyleObject">
								取消报名
							</u-button> -->
							<u-button type="primary" size="medium" shape="circle"  plain @click="recordDetails(order.bpto_code)">
								详情
							</u-button>
						</template>
<!-- 						<template v-else>
							<u-button type="primary" size="medium" shape="circle" plain  @click="recordDetails(job.id)">
								详情
							</u-button>
						</template> -->
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="您还未发布招聘信息"
				margin-top="100"></u-empty>
		</view>

		<!-- 发布按钮 -->
		<!-- 		<view class="publish-btn">
			<u-button type="primary" shape="circle" @click="createJob">
				发布新岗位
			</u-button>
		</view> -->

	</view>
</template>

<script>
	import DialNav from '@/components/nav/dial-nav.vue';
	import util from '../../../utils/util';
	export default {
		components: {
			DialNav
		},
		data() {
			return {
				currentTab: 1, // 默认选中"我的招聘"
				// tabs页
				currentTab: 0,
				tabs: [{
						name: '购课订单'
					},
					{
						name: '考证订单'
					}
				],
				image:'/static/nav/nav-classify.png',
				// 报名中：SigningUp， 待支付：unpaid， 已支付：paid ，报名成功:  registSuccess
				orderList: [{
						id: 1,
						title: '培训考试',
						salary: '5000.00',
						number: '32',
						image: '/static/nav/nav-classify.png',
						createTime: '2025-05-23',
						status: 'success',
						statusText: '报名成功'
					},
					{
						id: 2,
						title: '考评',
						salary: '3200.00',
						number: '15',
						image: '/static/nav/nav-classify.png',
						createTime: '2025-05-23',
						status: 'review-unpaid',
						statusText: '审核中-待支付'
					},
					{
						id: 2,
						title: '考评',
						salary: '3200.00',
						number: '15',
						image: '/static/nav/nav-classify.png',
						createTime: '2025-05-23',
						status: 'review-pay',
						statusText: '审核中-已支付'
					},
					{
						id: 2,
						title: '考评',
						salary: '3200.00',
						number: '15',
						image: '/static/nav/nav-classify.png',
						createTime: '2025-05-23',
						status: 'pay-success',
						statusText: '购买成功'
					}
				],
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
					// margin-right: 20rpx;

				},
			}
		},
		computed: {
			// 按条件过滤是否发布的条件
			// 0基础课程，0在线课程  1机构购买考证 2从业者购买考证 3 从业者购买题库,4购买直播课程
			filteredJobs() {
				if (this.currentTab === 0) {
					return this.orderList.filter(item => item.biz_type === 0 || item.biz_type === 3 || item.biz_type === 4);
				} else if (this.currentTab === 1) {
					return this.orderList.filter(item => item.biz_type === 2 || item.biz_type === 1);
				}
				return this.orderList;
			}
		},
		onShow() {
			this.getMyOrder()
		},
		methods: {
			// 获取我的订单
			getMyOrder() {
				this.$u.api.queryallorder({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('myorder:', res)
					this.orderList = []
					this.orderList = res.data.base_info
					
				})
			},
			// 处理时间
			chanageDataTime(datatime) {
				return util.formatDateTime(datatime)
			},
			tabChange(index) {
				console.log("tab:",index)
				this.currentTab = index;
			},
			createJob() {
				uni.navigateTo({
					url: '/pages/recruitment/create'
				});
			},
			// 带参数的页面跳转
			editJob(id) {
				uni.navigateTo({
					url: `/pages/recruitment/edit?id=${id}`
				});
			},
			// 跳转到支付
			orderpay(id) {
				uni.navigateTo({
					// url: `/pages/recruitment/edit?id=${id}`
					url: '/pages/Institution/record/paying?id=${id}'
				});
			},
			// 取消课程未支付的订单
			courseDelete(bptocode) {
				uni.showModal({
					title: '提示',
					content: '确定删除此订单？',
					success: (res) => {
						if (res.confirm) {
							this.$u.api.deletebcorder({
								"bptocode": bptocode
							}).then(res => {
								console.log('deleorder:',res)
								// 刷新订单
								this.getMyOrder()
							}).catch(err => {
								uni.showToast({
									title: '取消订单失败'+err,
									icon: 'fail'
								});
							})	
						}
					}
				});

			},
			// 取消考证未支付订单
			 kzDelete(bptocode) {
				 uni.showModal({
				 	title: '提示',
				 	content: '确定删除此订单？',
				 	success: (res) => {
				 		if (res.confirm) {
				 			this.$u.api.deletekzorder({
				 				"bptocode": bptocode
				 			}).then(res => {
				 				console.log('deleorder:',res)
				 				// 刷新订单
				 				this.getMyOrder()
				 			}).catch(err => {
				 				uni.showToast({
				 					title: '取消订单失败'+err,
				 					icon: 'fail'
				 				});
				 			})	
				 		}
				 	}
				 });
			 },
			// 跳转到订单详情页面
			recordDetails(bptocode){
				// console.log('查看详情',id)
				uni.navigateTo({
					url: `/pages/Practitioner/myOrder/orderDetails?bptocode=${bptocode}`
				});
			},
			deleteJob(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该招聘信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.jobList = this.jobList.filter(job => job.id !== id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			publishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'published';
					job.statusText = '已发布';
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					});
				}
			},
			unpublishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'draft';
					job.statusText = '未发布';
					uni.showToast({
						title: '已下架',
						icon: 'success'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruitment-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;

		/deep/ .u-tabs {
			background-color: #fff;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			margin: 0 10px;
			border-radius: 12rpx;
		}

		.content {
			// flex: 1;
			overflow-y: auto;
			margin: 10px;
			// padding: 10rpx;

			.job-card {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				
				.job-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
				
					.job-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}
				
					.job-salary {
						font-size: 28rpx;
						color: #ff6a00;
						font-weight: bold;
					}
				}
				
				.card-top {				
					display: flex;
					border-bottom: 1px solid #dfdfdf;
					margin-bottom: 20px;
				}

        .card-left {
					width: 60px;
					height: 80px;
					margin-right: 20px;
				}


				.job-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 26rpx;
					color: #666;

					.info-item {
						margin-right: 15rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.job-meta {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 30rpx;
					// border-bottom: 1px solid #dfdfdf;
					padding-bottom: 15rpx;

					.status {
						font-weight: bold;

						&.status-published {
							color: #19be6b;
						}

						&.status-draft {
							color: #ff9900;
						}
					}
				}

				.job-actions {
					// display: flex;
					// justify-content: flex-end;
					text-align: right;
				}
			}
		}

		.publish-btn {
			padding: 20rpx;
			background-color: #fff;
			border-top: 1rpx solid #eee;
		}
		
		// 此样式主要为了适配wx小程序的按钮
		
		/deep/ .u-size-medium {
			width: 50px;
		}
	}
</style>